<template>
  <div class="component_list">
    <div
      :draggable="true"
      @dragstart="dragStart($event, component.info)"
      @dragend="dragEnd"
      class="component-item"
      :key="component.id"
      v-for="component in componentList"
    >
      <n-icon size="28" :component="component.icon" />
      <span>
        {{ component.name }}
      </span>
    </div>
    <common-empty
      :emptyImgWidth="'100px'"
      tipSize="14px"
      v-show="!componentList.length"
    ></common-empty>
  </div>
</template>

<script lang="ts" setup>
  import { markRaw } from 'vue';
  import { PageItem } from 'naive-ui/es/pagination/src/utils';

  interface Props {
    componentList: ComponentItem[];
  }
  const props = defineProps<Props>();
  const { componentList } = toRefs(props);

  function dragStart(e: any, info: PageItem) {
    e.dataTransfer.setData('info', JSON.stringify(info));
  }
  function dragEnd(e: any) {
    e.preventDefault();
  }
</script>

<style scoped lang="scss">
  .component_list {
    flex: 1;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    .component-item {
      width: 80px;
      height: 80px;
      margin-right: calc((100% - 3 * 80px) / 2);
      margin-bottom: 8px;
      background: #f7f7f7;
      border-radius: 2px;
      cursor: pointer;
      float: left;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #aeafb1;
      &:nth-of-type(3n) {
        margin-right: 0;
      }
    }
  }
</style>
